今天來介紹運用CSS的flex屬性，超簡單製作導覽列
預想是
電腦版左邊有LOGO，右邊有nav選單
手機板左邊是LOGO，右邊會出現漢堡選單的圖樣，點擊後拉開隱藏的nav選單

首先我們先在HTML中加入nav跟一點點內容

<nav>
    <div class="left">
        <div class="logo">LOGO</div>
        <div class="menu-item"  id="ham">
            <i class=" fas fa-bars"></i>
        </div>
    </div>
    <ul class="menu-btn">
        <li>
            <a href="">AA</a>
        </li>
        <li>
            <a href="">BB</a>
        </li>
        <li>
            <a href="">CC</a>
        </li>
    </ul>
</nav>
<div>
    <h1>內容</h1>
</div>

還未放入CSS時長這樣

然後我們幫他加上CSS
把li跟連結的樣式拔掉，設置漢堡圖樣隱藏

nav {
    min-height: 40px;
    background-color: cadetblue;
    color: white;
    font-size: 24px;
    padding: 5px;
}

.menu-item {
    display: none;
}

li {
    list-style: none;
    padding: 0 10px;
    font-size: 16px;
}

a {
    text-decoration: none;
    color: white;
}

然後運用CSS的寬度語法，設置當寬度小於320時漢堡圖樣顯示，menu-btn隱藏

@media only screen and (min-width: 0px) and (max-width: 320px) {
    .menu-item {
        display: block;
    }
    .menu-btn {
        display: none;
    }
}

然後我們要設置神奇的flex語法
設下去後便能輕鬆讓nav在電腦版呈現橫的排列，手機板呈現直的排列

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.left {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.menu-btn {
    display: flex;
}

flex預設為橫向排列，設置flex的區塊內的東西會被整齊的橫向排列
我另外設置了
justify-content: space-between;
align-items: center;
是要讓裡面的東西照我期望的排版去排，實際作用可以自己google~

先設置好display: flex後，便能看到我們剛剛排直直的nav內容跟menu-btn變成橫向的了

然後在寬度小於320的地方把nav跟menu-btn運用flex的相關語法設成直向排列

@media only screen and (min-width: 0px) and (max-width: 320px) {
    nav {
        flex-direction: column;
    }

    .menu-btn {
        flex-direction: column;
        width: 100%;
    }
}

這邊先把menu-btn的display: none拔掉了讓大家看的到

然後我們來寫JS
這邊需要先多設一個css

.show {
    display: block;
}

然後運用jquery的addClass跟removeClass加到menu-btn讓他打開或關上就可以了

var ham = false;
$(function () {
    $("#ham").click(function () {
        if (!ham) {
            $(".menu-btn").addClass("show");
            ham = true
        } else {
            $(".menu-btn").removeClass("show");
            ham = false
        }
    });
})

先寫一個變數當旗幟判別打開或關上，預設是關上的，然後點擊漢堡圖樣時去判別旗幟狀態並給予相對應的改變就好

就這樣超簡單導覽列便完成了
這個做法出現的手機板nav選單會把內容往下推，只要另外再去設置position: absolute 或位置之類的就可以做到其他變化囉!!

為什麼我這邊是使用addClass跟removeClass而不是直接去設置css呢
因為如果你用
$(".menu-btn").css("display","block")跟$(".menu-btn").css("display","none")
他會被加在HTML的style裡面，這樣子只要你有點擊過一次漢堡標誌，讓我們的menu-btn有著display:none的話
你再次切換回電腦版時，會發現你看不到他了
因為即使你在css有設置什麼display:block之類的，他會被HTML中更高級的css覆蓋掉，無法作用的~